﻿@model SpaceNeedle.City6473.WebSite.Models.EditRequestModel
@using SpaceNeedle.City6473.Web.Data.Models

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "EditRequests";

    var staticContent = ViewBag.StaticContent as WebSiteContent;
    ViewBag.Title = staticContent.Requests.PageTitle;
}

<style>
    #icons {
        margin-top: 10px;
        width: 250px;
        background-color: beige;
    }

        #icons ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            border-top: 1px solid #efefef;
            border-left: 1px solid #efefef;
        }

    .icon {
        line-height: 64px;
        text-align: center;
        margin: 0;
        padding: 0;
        width: 64px;
        height: 64px;
        float: left;
        border-bottom: 1px solid #efefef;
        border-right: 1px solid #efefef;
        background-color: #000000;
    }

    .selected-icon {
        line-height: 64px;
        text-align: center;
        margin: 0;
        padding: 0;
        width: 64px;
        height: 64px;
        float: left;
        border-bottom: 1px solid #efefef;
        border-right: 1px solid #efefef;
        background-color: blue;
    }

    #icons img {
        vertical-align: middle;
        width: 48px;
        /*display:block;*/
    }
</style>
<script>
    var selectedElement = null;

    function Select(element)
    {
        if (selectedElement != null)
        {
            selectedElement.className = "icon";
        }

        element.className = "selected-icon";

        selectedElement = element;

        $("#Icon").val(selectedElement.dataset.icon);
    }
</script>

<br /><br />
<h3>@staticContent.Requests.Edit</h3>
@using (Html.BeginForm())
{
    @Html.HiddenFor(model => model.Request.Id)
    
    <div class="editor-label">
        @staticContent.Requests.Title
    </div>
    <div class="editor-field">
        @Html.TextBox("Title", Model.Request.Title)
        @Html.ValidationMessageFor(model => model.Request.Title)
    </div>
    <br />

    <div class="editor-label">
        @staticContent.Requests.Description
    </div>
    <div class="editor-field">
        @Html.TextBox("Description", Model.Request.Description)
        @Html.ValidationMessageFor(model => model.Request.Description)
    </div>
    <br />

    <div class="editor-label">
        @staticContent.Requests.Icon
    </div>
    
     <div id="icons">
         @{ int iconId = 0; }
        @foreach (var icon in Model.Icons)
{
    <div id="icon_@iconId" onclick="Select(this);" class="icon" data-icon="@icon"><img src="@icon" /></div>

    if (icon == Model.Request.Icon)
    {
                @*<div id="icon_@iconId" onreadystatechange="Select(this);" onclick="Select(this);" class="selected-icon" data-icon="@icon"><img src="@icon" /></div>*@
                
            <script>Select(document.getElementById('icon_@iconId'));</script>
            }
            @*else
            {
                <div onclick="Select(this);" class="icon" data-icon="@icon"><img src="@icon" /></div>
            }*@

            iconId++;
        }
    </div>
    
    <div class="editor-field">
        @Html.Hidden("IsEnabled", Model.Request.IsEnabled)
        @Html.Hidden("Order", Model.Request.Order)
        @Html.Hidden("Icon", Model.Request.Icon)
        @Html.ValidationMessageFor(model => model.Request.Icon)


    </div>
    
    <br />

    <div class="editor-label" style="clear:both;">
        <br />
        @staticContent.Requests.IsEnabled
    </div>
    <div class="editor-field">
        @Html.CheckBox("IsEnabledCheck", Model.Request.IsEnabled, new { onclick="ToggleEnabled(this);" })
        @Html.ValidationMessageFor(model => model.Request.Description)
    </div>
    <br />
    <script>
        function ToggleEnabled(checkbox)
        {
            $("#IsEnabled").val(checkbox.checked.toString());
        }
    </script>
    <div >
        <br />
        <br />
        <button class="btn btn-default" type="submit" value="Create">
            @staticContent.Operations.Save
        </button>
    </div>
}